<template>
  <view class="container-box">
  <!-- 头像区域 -->
  <view class="top-container">  
    <view class="top-img-box">
      <image class="top-img" :src="userInfo.avatarUrl" mode=""></image>
    </view>
    <text class="top-text">{{userInfo.nickName}}</text>
    <!-- 导航区域 -->
    <view class="nav-bar">
      <view class="nav-bar-item" @click="gotoOrder">
         <image src="http://m.qpic.cn/psc?/V507Fudi3ynqif227b163CSAaG47kgxx/ruAMsa53pVQWN7FLK88i5jmTFY9lxkfxA.276Zizr2vD5OfuOIsgiW5yIqKdt*GOi1NDjrDwXO5xzCDM5DTZ*Mqjxyv7gc4HSapHA6S7v9o!/b&bo=yADIAAAAAAADFzI!&rf=viewer_4" mode=""></image>
         <text>我的预约</text>
      </view>
      <view class="nav-bar-item" @click="volunteerCenter">
         <image src="http://m.qpic.cn/psc?/V507Fudi3ynqif227b163CSAaG47kgxx/ruAMsa53pVQWN7FLK88i5jmTFY9lxkfxA.276Zizr2vy8JM89UQrMEBIW4j0YTm2TRzg8Fp5QhPv4WLPSJiZ5hJca93scNdOX6gJXiDA0Ps!/b&bo=yADIAAAAAAADFzI!&rf=viewer_4" mode=""></image>
         <text>志愿中心</text>
      </view>
      <view class="nav-bar-item" @click="expressCheck">
         <image src="http://m.qpic.cn/psc?/V507Fudi3ynqif227b163CSAaG47kgxx/ruAMsa53pVQWN7FLK88i5qtKVZXWOGnBA5GbrUZmPBK59u.ZvaSnJ4Enro0RLT5pFtfaNCCOIgrvEHAA489e.f.sHIRROclm5U4aOzGc6HM!/b&bo=yADIAAAAAAADFzI!&rf=viewer_4" mode=""></image>
         <text>快递查询</text>
      </view>
    </view>
  </view>
  
   <!-- 公告区-->
    <view class="notice">
      <Top-Notice></Top-Notice>
    </view>
    <!-- 分组模块区 -->
    <view class="function">
      
      <u-cell-group>
      	<u-cell
        icon="map"
      	    title="地址管理"
      	    isLink
      	    url="/subpkg/addressManage/addressManage"
      	></u-cell>
      	<u-cell
        icon="server-man"
      	    title="联系社区"
      	    isLink
      	    url="/subpkg/connectCommunity/connectCommunity"
      	></u-cell>
        <u-cell
        icon="setting-fill"
            title="退出登录"
            isLink
            url=""
            @click="logout"
        ></u-cell>
      </u-cell-group>
      
    </view>
  </view>
  
</template>

<script>
  import {mapMutations,mapState} from 'vuex'
  export default {
    name:"M-Home",
    data() {
      return {
        
      };
    },
    computed: {
      ...mapState('m_volunteer',['token_v'])
    },
    methods:{
      ...mapMutations('m_user',['updateToken','updateUserInfo']),
      ...mapMutations('m_volunteer',['updateToken_v','updateVolunteerInfo']),
      // 退出登录
      logout(){
        uni.showToast({
          title:'退出成功',
          icon:'success'
        })
        // 将微信用户的信息清理干净
        this.updateToken('')
        this.updateUserInfo('{}')
        // 将志愿者信息清理干净
        this.updateToken_v("")
        this.updateVolunteerInfo('{}')
      },
      // 进入自愿中心
      volunteerCenter(){
        if(this.token_v == ""){
          return uni.$showMsg('请先注册成为志愿者！')
        }else{
          // 跳转页面到志愿中心
          uni.navigateTo({
            url:".//subpkg/volunteer-centeer/volunteer-centeer"
          })
        }
     },
     // 预约中心
     gotoOrder(){
       uni.navigateTo({
         url:".//subpkg/order/order"
       })
     },
     // 快递查询
    expressCheck(){
      uni.navigateTo({
        url:".//subpkg/check/check"
      })
    }
    },
    computed:{
      ...mapState('m_user',['userInfo'])
    }
  }
</script>

<style lang="scss">
page{
  background-color: #F4F4F4;
.top-container{
  height: 200px;
  border-top: 1px solid #efefef;
  background-color: #7cb717;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  .top-img-box{
    height: 100px;
    width: 100px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
     .top-img{
       width: 90%;
       height: 90%;
       border-radius: 100%;
       border: 1px solid grey;
     }
    }
  .top-text{
    font-size: 12px;
    margin-top: 10px;
    color: white;
  }
}   
.nav-bar{
  height: 60px;
  width: 95%;
  border: 1px solid #efefef;
  position: absolute;
  bottom: -50px;
  background-color: white;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .nav-bar-item{
    height:90% ;
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    image{
      width: 50%;
    }
    text{
      font-size: 12px;
      margin-top: 5px;
    }
  }
}
.notice{
    position: absolute;
  top: 260px;
}
.function{
  border: 1px solid #efefef;
  position: absolute;
  top: 310px;
  // height: 200px;
  width: 95%;
  left: 7px;
  background-color: white;
  border-radius: 4px;
}
}
</style>